<template>
  <div class="overview" flex>
    <Panel>
      <template slot="inner">
        <div style="height: 100%" flex="main:justify dir:top">
          <div class="title">联合奖惩</div>
          <div class="count-wrapper">
            <span class="square-bg">
              <i class="count-title">奖惩数量</i><br />
              <i class="num">{{ union.memoCount }}</i
              ><i class="white-font">（条）</i>
            </span>
            <span class="square-bg">
              <i class="count-title">措施数量</i><br />
              <i class="num">{{ union.measureCount }}</i
              ><i class="white-font">（条）</i>
            </span>
            <span class="square-bg">
              <i class="count-title">实施部门数量</i><br />
              <i class="num">{{ union.deptCount }}</i
              ><i class="white-font">（个）</i>
            </span>
          </div>
          <chart
            ref="chart1"
            :options="returnPie(union.chartData)"
            style="width: 100%; height: 220px; display: block"
          ></chart>
          <div class="title" flex="main:justify">
            <span>数据交换流向分析</span>
            <span class="handle-btn" flex>
              <i
                class="btn"
                :class="handleBtnTab1 === 0 ? 'active' : ''"
                @click="changeExchangeDataMonth"
                >本月</i
              >
              <i
                class="btn"
                :class="handleBtnTab1 === 1 ? 'active' : ''"
                @click="changeExchangeDataYear"
                >本年</i
              >
              <b-date-picker
                type="daterange"
                :open="dateOpen1"
                :value="date1"
                confirm
                @on-change="handleChange1"
                @on-clear="handleClear1"
                @on-ok="handleOk1"
                placeholder="Select date"
              >
                <a
                  style="display: block; width: 76px"
                  href="javascript:void(0)"
                  @click="handleClick('dateOpen1')"
                >
                  <!--<template v-if="date1 === ''">选择日期</template>
                  <template v-else>{{ date1 }}</template>-->
                  <template
                    >选择日期</template
                  >
                </a>
              </b-date-picker>
            </span>
          </div>
          <div class="count-wrapper nowrap" style="padding: 0 8px 20px">
            <span class="square-bg data-change">
              <img src="~@/assets/images/overview/icon_data.png" alt="" /><br />
              <i>交换数据总量</i><br />
              <i class="num">{{ dataExchange.getIn + dataExchange.getOut }}</i
              ><i>（条）</i>
            </span>
            <span class="square-bg data-change" flex>
              <span>
                <i class="num">{{ dataExchange.getIn }}</i
                ><i>（条）</i><br />
                <i>归集数据量</i><br />
                <i style="line-height: 40px">正确率</i
                ><i style="color: #00ccff; line-height: 40px"
                  >&nbsp;{{ dataExchange.getInCorrect }}</i
                ><br />
              </span>
              <span>
                <i class="num">{{ dataExchange.getOut }}</i
                ><i>（条）</i><br />
                <i>输出数据量</i><br />
                <i style="line-height: 40px">正确率</i
                ><i style="color: #00ccff; line-height: 40px"
                  >&nbsp;{{ dataExchange.getOutCorrect }}</i
                ><br />
              </span>
            </span>
            <span class="square-bg data-change mt-5" style="padding-top: 12px">
              <i>已对接部门数</i><br />
              <i class="num">{{
                dataExchange.dockedNormal + dataExchange.dockedAbnormal
              }}</i
              ><i>（个）</i>
            </span>
            <span class="square-bg data-change mt-5">
              <span style="padding-bottom: 0; padding-top: 0">
                <i>任务监控</i><br />
                <i style="line-height: 40px">正常任务</i>&nbsp;<i class="num">{{
                  dataExchange.dockedNormal
                }}</i
                >&nbsp;<i style="line-height: 40px">异常</i>&nbsp;<i
                  class="num"
                  >{{ dataExchange.dockedAbnormal }}</i
                >
              </span>
            </span>
          </div>
          <chart
            ref="chart2"
            :options="returnBar(dataExchange.chartData)"
            style="width: 100%; height: 300px; display: block"
          ></chart>
        </div>
      </template>
    </Panel>
    <Panel
      style="padding-left: 0; padding-right: 0"
      flex="main:justify dir:top"
    >
      <template slot="outer">
        <div class="inner" style="overflow: hidden; width: 800px">
          <div class="total-count">
            <i>数据归集总量</i>
            <i
              v-for="(item, index) in total"
              :key="index"
              class="total-num"
              :class="'num' + item"
            ></i>
            <i style="padding-left: 20px">条</i>
          </div>
          <div class="cube">
            <div class="inner-float"></div>
            <div class="cir-box">
              <div class="cir1">
                <img src="~@/assets/images/overview/yuan01.png" alt="" />
              </div>
              <div class="cir2">
                <img src="~@/assets/images/overview/yuan02.png" alt="" />
              </div>
              <div class="cir"></div>
            </div>
          </div>
          <div class="rotate">
            <div class="rotate-inner">
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[0].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[0].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[1].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[1].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[2].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[2].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[3].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[3].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[4].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[4].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
              <div class="inner-item">
                <p>
                  <i>{{ rotateData[5].name }}</i>
                </p>
                <p>
                  <i class="num">{{ rotateData[5].value }}</i
                  ><i>(条)</i>
                </p>
                <div>
                  <img src="~@/assets/images/overview/data.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template slot="inner">
        <div class="title">红黑名单统计</div>
        <div class="red-black-wrapper" flex>
          <div class="container">
            <div class="red-list">
              <img src="~@/assets/images/overview/icon_hong.png" alt="" />
              <i class="white-font">红名单</i>
              <i class="num">{{ getKeysTotal(redBlackList.redList) }}</i>
              <i class="white-font">（个）</i>
            </div>
            <div class="msg-list" flex="wrap:wrap">
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_hgrz.png"
                  alt=""
                />
                <span>
                  <p class="white-font">海关认证企业</p>
                  <p>
                    <i class="num">{{ redBlackList.redList.signCom }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_ajnsr.png"
                  alt=""
                />
                <span>
                  <p class="white-font">A级纳税人</p>
                  <p>
                    <i class="num">{{ redBlackList.redList.taxpayer }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_shfr.png"
                  alt=""
                />
                <span>
                  <p class="white-font">社会法人诚实守信</p>
                  <p>
                    <i class="num">{{ redBlackList.redList.corp }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_zyz.png"
                  alt=""
                />
                <span>
                  <p class="white-font">优秀青年志愿者</p>
                  <p>
                    <i class="num">{{ redBlackList.redList.volunteer }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
            </div>
          </div>
          <div class="container">
            <div class="red-list">
              <img src="~@/assets/images/overview/icon_hei.png" alt="" />
              <i class="white-font">黑名单</i>
              <i class="num">{{ getKeysTotal(redBlackList.blackList) }}</i>
              <i class="white-font">（个）</i>
            </div>
            <div class="msg-list" flex="wrap:wrap">
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_hgrz.png"
                  alt=""
                />
                <span>
                  <p class="white-font">失信被执行人</p>
                  <p>
                    <i class="num">{{ redBlackList.blackList.performed }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_ajnsr.png"
                  alt=""
                />
                <span>
                  <p class="white-font">重大税收违法案件</p>
                  <p>
                    <i class="num">{{ redBlackList.blackList.case }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_shfr.png"
                  alt=""
                />
                <span>
                  <p class="white-font">拖欠农民工工资</p>
                  <p>
                    <i class="num">{{ redBlackList.blackList.unpaid }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
              <div class="msg-list-item" flex="main:center">
                <img
                  class="rb-icon"
                  src="~@/assets/images/overview/icon_zyz.png"
                  alt=""
                />
                <span>
                  <p class="white-font">严重失信债务人</p>
                  <p>
                    <i class="num">{{ redBlackList.blackList.lose }}</i
                    ><i class="white-font">（个）</i>
                  </p>
                </span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Panel>
    <Panel>
      <template slot="inner">
        <div style="height: 100%" flex="main:justify dir:top">
          <div class="title">资源信息分类统计</div>
          <div class="count-wrapper">
            <div class="count-item square-bg">
              <i class="white-font" style="line-height: 40px">一级分类</i><br />
              <i class="num">{{ collection.lv1 }}</i
              ><i>（条）</i>
            </div>
            <div class="count-item square-bg">
              <i class="white-font" style="line-height: 40px">二级分类</i><br />
              <i class="num">{{ collection.lv2 }}</i
              ><i>（条）</i>
            </div>
            <div class="count-item square-bg">
              <i class="white-font" style="line-height: 40px">资源数</i>
              <i class="num">{{ collection.resourceCount }}</i
              ><i>（条）</i>
            </div>
            <div class="count-item square-bg">
              <i class="white-font" style="line-height: 40px">部门数</i>
              <i class="num">{{ collection.deptCount }}</i
              ><i>（个）</i>
            </div>
          </div>
          <chart
            ref="chart2"
            :options="returnCollection(collection.chartData)"
            style="width: 100%; height: 220px; display: block"
          ></chart>
          <div class="title" style="margin-top: 10px" flex="main:justify">
            <span>信用报告查询趋势分析</span>
            <span class="handle-btn" flex>
              <i
                class="btn"
                :class="handleBtnTab2 === 0 ? 'active' : ''"
                @click="changeReportDataMonth"
                >本月</i
              >
              <i
                class="btn"
                :class="handleBtnTab2 === 1 ? 'active' : ''"
                @click="changeReportDataYear"
                >本年</i
              >
              <b-date-picker
                type="daterange"
                :open="dateOpen2"
                :value="date2"
                confirm
                @on-change="handleChange2"
                @on-clear="handleClear2"
                @on-ok="handleOk2"
                placeholder="Select date"
              >
                <a
                  style="display: block; width: 76px"
                  href="javascript:void(0)"
                  @click="handleClick('dateOpen2')"
                >
                  <!--<template v-if="date2 === ''">选择日期</template>
                  <template v-else>{{ date2 }}</template>-->
                  <template
                    >选择日期</template
                  >
                </a>
              </b-date-picker>
            </span>
          </div>
          <div class="chart-msg-bar">
            信用报告查询总次数：{{ reSum(report.chartData, 1) }}（次）
          </div>
          <chart
            ref="chart2"
            :options="returnArea(report.chartData)"
            style="width: 100%; height: 220px; display: block"
          ></chart>
          <div class="title">数据提报部门</div>
          <div class="dept-list" style="margin-bottom: 10px">
            <div class="header-wrapper" flex="main:justify">
              <span class="list-header" style="flex: 1">部门名称</span>
              <span class="list-header" style="flex: 1">数量（条）</span>
              <span class="list-header" style="flex: 1">入库率</span>
            </div>
            <div
              class="body-wrapper"
              flex="main:justify"
              v-for="(item, index) in submission"
              :key="index"
            >
              <span style="flex: 1">{{ item.name }}</span>
              <span style="flex: 1">{{ item.count }}</span>
              <span style="flex: 1">{{ item.percent }}</span>
            </div>
          </div>
        </div>
      </template>
    </Panel>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
import Panel from '../../../components/Panel/Panel'
// 统一变量
const xyLineColor = '#535e83'
const splitLineColor = '#283353'
export default {
  name: 'Overview',
  data() {
    return {
      color: [
        '#1167e2',
        '#4dcea7',
        '#fc9530',
        '#ff3b3c',
        '#563cff',
        '#0fbce0',
        '#0c31e2'
      ],
      // chart
      handleBtnTab1: 0,
      handleBtnTab2: 0,
      date1: '',
      date2: '',
      dateOpen1: false,
      dateOpen2: false
    }
  },
  components: {
    Panel
  },
  created() {
    // 初始化页面数据
    this.$store.dispatch('getOverview').then(() => {
      this.numChange(this.$store.state.overview.total)
    })
  },
  mounted() {
    // this.numChange(this.$store.state.overview.total)
  },
  computed: {
    ...mapState({
      union: state => state.overview.union,
      dataExchange: state => state.overview.dataExchange,
      total: state => state.overview.total,
      rotateData: state => state.overview.rotateData,
      redBlackList: state => state.overview.redBlackList,
      collection: state => state.overview.collection,
      report: state => state.overview.report,
      submission: state => state.overview.submission
    })
  },
  watch: {
    /* date1: function(n){
        if (n !== '') {
          this.handleBtnTab1 = 2
        }
      },
      date2: function(n){
        if (n !== '') {
          this.handleBtnTab2 = 2
        }
      },
      handleBtnTab: function(){

      } */
  },
  methods: {
    getKeysTotal(data) {
      const keyList = Object.keys(data)
      let sum = keyList.reduce((total, item) => {
        return total + data[item]
      }, 0)
      return sum
    },
    reSum(arr, key) {
      let copy = []
      arr.forEach((item, index) => {
        if (index > 0) {
          copy.push(item[key])
        }
      })
      let sum = (total, value) => total + value
      return copy.reduce(sum, 0)
    },
    handleClick(param) {
      this[param] = !this[param]
    },
    handleChange1(date) {
      this.date1 = date
    },
    handleChange2(date) {
      this.date2 = date
    },
    handleClear1() {
      this.dateOpen1 = false
    },
    handleOk1() {
      this.dateOpen1 = false
      this.handleBtnTab1 = 2
      this.$store.dispatch('getOverviewDataExchange', this.date1)
    },
    handleClear2() {
      this.dateOpen2 = false
    },
    handleOk2() {
      this.dateOpen2 = false
      this.handleBtnTab2 = 2
      this.$store.dispatch('getOverviewReport', this.date2)
    },
    // 渲染pie图
    returnPie(data) {
      return {
        color: ['#34aec5', '#4065f1', '#fc9530', '#f93b3b'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '50%'],
            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            /* data: [
                { value: 1000, name: '惩戒' },
                { value: 2000, name: '激励' }
              ] */
            data: data.inner
          },
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: ['60%', '75%'],
            label: {
              formatter: '  {a|{a}}  \n    {d}%   ',
              rich: {
                a: {
                  color: '#fff',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            /* data: [
                { value: 400, name: '法人惩戒' },
                { value: 600, name: '自然人惩戒' },
                { value: 1400, name: '法人激励' },
                { value: 600, name: '自然人激励' }
              ], */
            data: data.outer
          }
        ]
      }
    },
    returnBar(data) {
      return {
        grid: {
          top: 30,
          left: 50,
          right: 10
        },
        legend: {
          bottom: '2%',
          textStyle: { color: '#fff' }
        },
        tooltip: {},
        dataset: {
          // dimensions: ['product', 'collection', 'output'],
          source: data
        },
        xAxis: {
          type: 'category',
          axisLine: { lineStyle: { color: xyLineColor } },
          boundaryGap: ['20%', '20%']
        },
        yAxis: {
          boundaryGap: ['20%', '20%'],
          axisLine: { lineStyle: { color: xyLineColor } },
          splitLine: { lineStyle: { color: splitLineColor } },
          name: '（条）',
          nameGap: 10
        },
        series: [
          {
            type: 'bar',
            barWidth: 8,
            barGap: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00befc' },
                { offset: 1, color: '#00befc33' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#294bd5' },
                { offset: 1, color: '#294bd533' }
              ])
            }
          }
        ]
      }
    },
    returnCollection(data) {
      return {
        color: '#00abfb',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '10%',
          bottom: 0,
          top: '12%',
          containLabel: true
        },
        dataset: {
          source: data
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: xyLineColor
            }
          },
          splitLine: { lineStyle: { color: splitLineColor } },
          name: '（条）',
          nameGap: 8
        },
        yAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: xyLineColor
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 8
            }
          }
        ]
      }
    },
    returnArea(data) {
      return {
        dataset: {
          source: data
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: { color: xyLineColor }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: xyLineColor } },
          splitLine: { lineStyle: { color: splitLineColor } },
          max: function(value) {
            return value.min - 1
          },
          min: function(value) {
            return value.max + 1
          },
          name: '（次）',
          nameGap: 10
        },
        series: [
          {
            type: 'line',
            itemStyle: {
              color: 'rgba(2,203,255,1)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(2,203,255,0.8)'
                },
                {
                  offset: 1,
                  color: 'rgba(2,203,255,0.2)'
                }
              ])
            }
          }
        ]
      }
    },
    numChange(num) {
      let copy = JSON.parse(JSON.stringify(num))
      let change = setInterval(() => {
        let arr = []
        num.forEach(() => {
          arr.push(parseInt(Math.random() * 10))
        })
        num.splice(0, 8)
        num.push(...arr)
      }, 20)
      setTimeout(() => {
        window.clearInterval(change)
        this.$store.state.overview.total = copy
      }, 1000)
    },
    changeReportDataMonth() {
      this.handleBtnTab2 = 0
      this.date2 = ''
      this.$store.dispatch('getOverviewReport', 'thisMonth')
    },
    changeReportDataYear() {
      this.handleBtnTab2 = 1
      this.date2 = ''
      this.$store.dispatch('getOverviewReport', 'thisYear')
    },
    changeExchangeDataMonth() {
      this.handleBtnTab1 = 0
      this.date1 = ''
      this.$store.dispatch('getOverviewDataExchange', 'thisMonth')
    },
    changeExchangeDataYear() {
      this.handleBtnTab1 = 1
      this.date1 = ''
      this.$store.dispatch('getOverviewDataExchange', 'thisYear')
    }
  }
}
</script>

<style lang="stylus" scoped>
$p = 156
$itemW = 110
$itemH = 110
$rotateW = 4 * $p
$rotateH = 3.46 * $p

[flex~="content:around"]
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around

.white-font
  color #fff

.overview
  width: 100%
  height: 1000px
  box-sizing border-box
  padding: 20px 0
  background-image: url('~@/assets/images/overview/ge.png')
  background-repeat: no-repeat
  background-position: center 40%

  .dept-list
    color #fff

    .list-header
      font-weight: 700

    div
      height 28px
      line-height: 28px

      &:nth-child(odd)
        background-color: #001739

      &:nth-child(even)
        background-color: #061029

      span
        text-align center

  .title
    font-weight: 700
    color #ffffff
    font-size: 18px
    line-height: 32px
    background-image: url('~@/assets/images/summary/t_bg.png')
    background-repeat: no-repeat
    background-position: left bottom
    -webkit-background-size: 100% 20px
    background-size: 100% 20px
    height 36px
    margin-top: 6px
    margin-bottom: 10px

  > div
    &:nth-child(1)
      width 450px

    &:nth-child(2)
      width calc(100% - 900px)

    &:nth-child(3)
      width 450px

  .count-wrapper
    display flex
    justify-content space-between
    width: 100%
    .square-bg
      width 115px
    .count-item
      width 23%
      padding-bottom 8px
      text-align center
      color #fff

    .count-title
      color #ffffff
      line-height: 30px
      font-size: 14px

    span
      padding 8px
      display inline-block

      .iconfont
        color $fontColor
        font-weight: 700
        font-size: 32px

    .data-change
      color #fff
      text-align center
      line-height: 26px
      width: 120px

      &:nth-child(2)
        span
          padding-right: 0

      &:nth-child(even)
        text-align left
        width: 228px
        padding-top: 12px
        padding-left: 10px

  .nowrap
    flex-wrap wrap

  .inner
    position relative
    width ($rotateW) px
    height: 640px
    margin 0 auto

    .total-count
      position absolute
      top: 0
      left 50%
      transform translateX(-50%)
      width: 800px
      text-align center
      font-size: 26px
      font-weight: 700
      color #fff
      letter-spacing 8px

      i
        display inline-block
        vertical-align middle
        margin 4px

        &:first-of-type
          padding-right: 20px

        &.total-num
          width 49px
          height: 55px

        &.num0
          background-image: url('~@/assets/images/overview/0.png')

        &.num1
          background-image: url('~@/assets/images/overview/1.png')

        &.num2
          background-image: url('~@/assets/images/overview/2.png')

        &.num3
          background-image: url('~@/assets/images/overview/3.png')

        &.num4
          background-image: url('~@/assets/images/overview/4.png')

        &.num5
          background-image: url('~@/assets/images/overview/5.png')

        &.num6
          background-image: url('~@/assets/images/overview/6.png')

        &.num7
          background-image: url('~@/assets/images/overview/7.png')

        &.num8
          background-image: url('~@/assets/images/overview/8.png')

        &.num9
          background-image: url('~@/assets/images/overview/9.png')

    .cube
      display inline-block
      width: 100%
      height: 100%
      position relative
      z-index 10

      .inner-float
        position absolute
        width: 100%
        height: 100%
        background-image: url('~@/assets/images/overview/cube.png')
        background-repeat: no-repeat
        background-position: center 256px;
        -webkit-background-size: 160px 160px
        background-size: 160px 160px
        z-index 20
        animation infinite shineCube 4s linear

      .cir-box
        width: 100%
        height: 100%
        position absolute
        z-index 10

      .cir
        position absolute
        width 500px
        height: 500px
        top: calc(50% + 100px)
        left: 50%
        animation shine infinite linear 6s

        &::before
          position absolute
          top: 0
          left: 0
          content ''
          width: 110%
          height: 110%
          display block
          transform translate(-50%, -50%) rotateX(60deg)
          border: 1px dashed $fontColor
          -webkit-border-radius: 50%
          -moz-border-radius: 50%
          border-radius: 50%

        &::after
          content ''
          width: 130%
          height: 130%
          display block
          transform translate(-50%, -50%) rotateX(60deg)
          border: 1px solid $fontColor
          -webkit-border-radius: 50%
          -moz-border-radius: 50%
          border-radius: 50%

      .cir1
        position absolute
        top: calc(50% + 100px)
        left: 50%
        animation shine infinite linear 6s

        img
          width 450px
          height: auto
          transform translate(-50%, -50%) rotateX(60deg)
        &::before
          content ''
          width: 160%
          height: 160%
          border: 2px solid rgba(15,100,230,0.5)
          display block
          position absolute
          top: 0
          transform: translate(-50%, -50%) rotateX(60deg);
          -webkit-border-radius: 50%
          -moz-border-radius: 50%
          border-radius: 50%
          box-shadow 0 0 10px rgba(20,140,250,0.4)
        &::after
          content ''
          width: 130%
          height: 130%
          top: 0
          border: 2px dashed rgba(15,100,230,0.8)
          display block
          position absolute
          transform: translate(-50%, -50%) rotateX(60deg);
          -webkit-border-radius: 50%
          -moz-border-radius: 50%
          border-radius: 50%
      .cir2
        position absolute
        top: calc(50% + 100px)
        left: 50%
        animation shine infinite linear 6s
        // animation-delay 3s

        img
          width 300px
          height: auto
          transform translate(-50%, -50%) rotateX(60deg)

  .red-black-wrapper
    .container
      width 50%

      .red-list
        padding-bottom: 10px
        text-align center
        background-image: url('~@/assets/images/overview/tuopan.png')
        background-repeat: no-repeat
        background-position: bottom center

        img, i
          vertical-align middle
          padding 10px

      .msg-list
        padding-top: 20px

        .msg-list-item
          width: 50%
          margin-top: 15px

          .rb-icon
            margin-right: 10px
            width: 52px
            height: 52px

          span
            width: 112px

.rotate
  position absolute
  margin 0 auto
  top 5px
  left 86px
  width ($rotateW) px
  height: ($rotateH) px
  transform-style preserve-3d
  // transform rotateX(-10deg)
  // background-color: #fff
  animation rotate3d linear 30s infinite
  z-index 20

  &:hover
    animation-play-state: paused;
    -webkit-animation-play-state: paused;

    .rotate-inner
      .inner-item
        animation-play-state: paused;
        -webkit-animation-play-state: paused;

  .rotate-inner
    position relative
    width: 100%
    height: 100%
    color #fff

    .inner-item
      animation rotate3dOpposite linear infinite 30s
      // transform-style preserve-3d
      // transform perspective(1000)
      text-align center
      width: ($itemW) px
      height: ($itemH) px
      position relative

      p
        text-align center
        transform rotateX(10deg) scaleY(2)
        height: 32px;

      div
        position absolute
        left: 50%
        top: 130px
        width: 120px
        height: 105px
        text-align center
        transform translateX(-50%) rotateX(10deg) scaleY(2)
        background-image: url('~@/assets/images/overview/pan.png')
        background-position: center bottom
        -webkit-background-size: contain
        background-size: contain
        background-repeat: no-repeat

      &:nth-child(1)
        position absolute
        top: (0 - $itemH/ 2) px
        left: ($p - $itemW/ 2) px

      &:nth-child(2)
        position absolute
        top: (0 - $itemH/ 2) px
        left: ($p* 3 - $itemW/ 2) px

      &:nth-child(3)
        position absolute
        top: ($rotateH/ 2 - $itemH/ 2) px
        left: ($p* 4 - $itemW/ 2) px

      &:nth-child(4)
        position absolute
        top: ($rotateH - $itemH/ 2) px
        left: ($p* 3 - $itemW/ 2) px

      &:nth-child(5)
        position absolute
        top: ($rotateH - $itemH/ 2) px
        left: ($p - $itemW/ 2) px

      &:nth-child(6)
        position absolute
        top: ($rotateH/ 2 - $itemH/ 2) px
        left: (0 - $itemW/ 2) px

.square-bg
  background-color: #01173a
  padding-bottom: 8px

.chart-msg-bar
  text-align center
  color #fff

.handle-btn
  color #fff
  font-size: 12px

  .active
    background-color: #0d1b4d

  .btn
    white-space nowrap
    line-height: 32px
    height: 32px
    padding: 0 10px;
    margin-right: 4px
    -webkit-border-radius: 16px
    -moz-border-radius: 16px
    border-radius: 16px
    cursor pointer

.handle-btn >>> .bin-select-dropdown
  background-color: #01173a

.handle-btn >>> .bin-date-picker-rel
  line-height: 32px

@keyframes rotate3d {
  0% {
    transform: rotateX(60deg) rotateZ(0)
  }
  100% {
    transform: rotateX(60deg) rotateZ(1turn)
  }
}

@keyframes rotate3dOpposite {
  0% {
    transform: rotateZ(0)
  }
  100% {
    transform: rotateZ(-1turn)
  }
}

@keyframes shine {
  0% {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 0 0;
  }
  50% {
    opacity: .8;
    transform: scale(.9);
    transform-origin: 0 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
    transform-origin: 0 0;
  }
}

@keyframes shineCube {
  0% {
    opacity: 1;
  }
  50% {
    opacity: .8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shadowShine {
  0% {
    box-shadow: 0 0 20px $lightShadowColor;
  }
  50% {
    box-shadow: 0 0 2px $lightShadowColor;
  }
  100% {
    box-shadow: 0 0 20px $lightShadowColor;
  }
}
</style>
